import React from 'react';
import {Button, Input, List} from "antd";

// 当一个组件只有render函数时，可以称其为无状态组件，无状态组件可以使用一个函数来表示，性能比用class声明的性能好。

const TodoListUI = (props) => {
  return (
  <div style={{'marginTop': '30px', 'marginLeft': '30px'}}>
    <Input
      value={props.inputValue}
      placeholder='请输入代办项'
      onChange={props.handleInputChange}
      style={{width: '300px', 'marginRight': '10px'}}/>
    <Button type="primary" onClick={props.handleBtnSubmit}>提交</Button>

    <List
      style={{width: '300px', 'marginTop': '10px'}}
      bordered
      dataSource={props.list}
      renderItem={(item, index) => (<List.Item onClick={() => {props.handleItemDel(index)}}>{item}</List.Item>)}
    />
  </div>)
}

/*class TodoListUI extends Component {
  render () {
    return (
      <div style={{'marginTop': '30px', 'marginLeft': '30px'}}>
        <Input
          value={this.props.inputValue}
          placeholder='请输入代办项'
          onChange={this.props.handleInputChange}
          style={{width: '300px', 'marginRight': '10px'}}/>
        <Button type="primary" onClick={this.props.handleBtnSubmit}>提交</Button>

        <List
          style={{width: '300px', 'marginTop': '10px'}}
          bordered
          dataSource={this.props.list}
          renderItem={(item, index) => (<List.Item onClick={() => {this.props.handleItemDel(index)}}>{item}</List.Item>)}
        />
      </div>
    )
  }
}*/

export default TodoListUI;